<template>
  <div>
      <table>
          <thead>
              <tr>
                  <th>编号</th>
                  <th>品牌名称</th>
                  <th>创立时间</th>
                  <th>操作</th>
              </tr>
          </thead>
          <tbody>
              <tr v-for="(itme) in arr" :key="itme.id">
                  <td>{{itme.id}}</td>
                  <td>{{itme.name}}</td>
                  <td>{{itme.time}}</td>
                  <td><button @click="del(index)">删除</button></td>
              </tr>
              <tr v-if="arr.length ===0">
                 <td colspan="4"> 没有数据咯!</td>
              </tr>
          </tbody>
      </table>
  </div>
</template>

<script>
export default {
    data () {
        return {
          arr:[{
              id:1,
              name:'奔驰',
              time:'2020-08-01'
          },
          {
              id:2,
              name:'宝马',
              time:'2020-08-01'
          },
          {
              id:3,
              name:'保时捷',
              time:'2020-08-01'
          }
          
          ]

        }
    },
    methods: {
        del(index){
            this.arr.splice(index,1)
        },
        

    }
}
</script>

<style>
thead,tbody,tr,th,td{
    border:1px solid #000
}
</style>